
<template>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <Form-item label="用户ID" prop="id">
                <Input v-model="formValidate.id" placeholder="用户ID"></Input>
            </Form-item>
            </Form-item>
            <Form-item label="手机号码" prop="title">
                <Input v-model="formValidate.phone" placeholder="手机号码"></Input>
            </Form-item>
            <Form-item label="身份证号码" prop="intro">
                <Input v-model="formValidate.card" type="textarea" :autosize="{minRows: 1,maxRows: 5}" placeholder="身份证号码"></Input>
            </Form-item>
            <Form-item label="身份证正面照" prop="detail">

                  <img class="addimg" v-bind:src="'http://www.htmlk.cn/images/'+formValidate.zcard "/>
                <img class="addimg" v-bind:src="'http://www.htmlk.cn/images/'+formValidate.fcard "/>
            </Form-item>
          
            <Form-item label="身份认证" prop="state">
                <Select v-model="formValidate.cardState" placeholder="上架状态">
                    <Option value="0">未提交</Option>
                     <Option value="1">等待审核</Option>
                    <Option value="2">审核通过</Option>
                    <Option value="3">审核未通过</Option>
                   
                </Select>
            </Form-item>
             <Form-item label="会员认证" prop="state">
                <Select v-model="formValidate.state" placeholder="上架状态">
                    <Option value="0">未支付1万元</Option>
                    <Option value="1">支付成功</Option>
                    <Option value="2">支付失败</Option>
                    <Option value="3">审核未通过</Option>
                </Select>
            </Form-item>
              <Form-item label="账号状态" prop="state">
                <Select v-model="formValidate.state" placeholder="上架状态">
                    <Option value="0">正常</Option>
                    <Option value="1">冻结</Option>
                  
                </Select>
            </Form-item>
            <Form-item>
               
                 <Button type="primary" @click="handleUpdate('formValidate')">提交</Button>
           
            </Form-item>
        </Form>
</template>
<script>
    export default {
        data() {
                return {
                    imgurl:[],
                    formValidate: {
                        id: '1',
                        phone: '1',
                        card: '',
                        zcard: '',
                        fcard: '',
                        cardState: '',
                        price: 0
                    },
                    ruleValidate: {
                        sort: [{
                            required: true,
                            message: '不能为空',
                            trigger: 'blur'
                        }],
                        dist: [{
                            required: true,
                            message: '请选择一级目录',
                            trigger: 'blur'
                        }, ],
                        title: [{
                            required: true,
                            message: '请输入',
                            trigger: 'blur'
                        }],
                        intro: [{
                            required: true,
                            message: '请输入',
                            trigger: 'blur'
                        }],
                        detail: [{
                            required: true,
                            message: '请输入',
                            trigger: 'blur'
                        }],
                        img: [{
                            required: true,
                            message: '请输入',
                            trigger: 'blur'
                        }],
                        state: [{
                            required: true,
                            message: '请输入',
                            trigger: 'blur'
                        }]
                    }
                }
            },
              mounted: function () {

                if(this.$route.params.id){
                     var id=this.$route.params.id
                     console.log(id)
                this.$http.get("http://www.htmlk.cn/userByid?id="+id).then((response) => {
                    this.$data.formValidate=response.data[0]
                  console.log(response)
                   
                })
                }
               
        },
            methods: {
                FW(event) {
                    var that = this;
                    var input = event.target;
                    // var reader = new FileReader();
                    var data = new FormData();
                   // 文件数据
                    for (var f = input.files.length - 1; f >= 0; f--) {
                       
                         data.append('avatar',  input.files[f]); 
                    }
                    this.$http.post("http://www.htmlk.cn:80/profileArr", data).then((response) => {
                        console.log(response.data)
                        // that.formValidate.img=response.data.imgurl
                        that.imgurl=response.data.imgurl
                        var res=response.data.imgurl
                        var arr=[]
                        for (var i = res.length - 1; i >= 0; i--) {
                           console.log(res[i].filename) 
                            arr.push(res[i].filename)
                        }
                        if(res.length>1){
                                var s=arr.join("@")
                            }else{
                                var s=arr[0]
                            }

                            that.formValidate.img=s
                       
                        
                    })

                },
                handleSubmit(sort) {
                    var that = this
                    console.log(that.$data.formValidate)
                    var res=that.$data.formValidate
                    var parms='?sort='+res.sort+'&dist='+res.dist+'&title='+res.title+'&intro='+res.intro+'&detail='+res.detail+'&img='+res.img+'&price='+res.price+'&state='+res.state

                    this.$refs[sort].validate((valid) => {
                        if (valid) {
                            
                            this.$http.get(url).then((response) => {
                                console.log(response.data)
                            })
                            this.$Message.success('提交成功!');
                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    })
                },
                handleUpdate(){
                   
                    var url="http://www.htmlk.cn:80/updatelist"
                    
                       
                    var postData = this.$data.formValidate;
                     
                    postData = (function(obj){ // 转成post需要的字符串.
                        var str = "";
                     
                        for(var prop in obj){
                            str += prop + "=" + obj[prop] + "&"
                        }
                        return str;
                    })(postData);
                     
                    var xhr = new XMLHttpRequest();
                     
                    xhr.open("POST", url, true);
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    xhr.onreadystatechange = function(){
                        var XMLHttpReq = xhr;
                        if (XMLHttpReq.readyState == 4) {
                            if (XMLHttpReq.status == 200) {
                                var text = XMLHttpReq.responseText;
                     
                                console.log(text);
                            }
                        }
                    };
                    xhr.send(postData);
                     // this.axios.post(url,data).then((response) => {
                     //            console.log(response.data)
                     //        })
                    
                     // this.axios({
                     //      method: 'post',
                     //      url: url,
                     //      data:data,
                     //      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                     //    }).then((response) => {
                     //            console.log(response.data)
                     //        });

                },  
                handleReset(name) {
                    this.$refs[name].resetFields();
                }
            }
    }
</script>
<style scoped>
.addli{
    float: left;
     width: 100px;
  height: 100px;
}
.addimg{
  width: 100px;
  height: 100px;

}
</style>
